<script setup lang="ts">
import { InfoCircleOutlined, SettingOutlined } from '@ant-design/icons-vue'
import { h } from 'vue'

const { languageOptions } = defineProps(['languageOptions'])
const language = defineModel<string>('language', { required: true })
const emit = defineEmits(['openSetting', 'openSolution'])
</script>
<template>
    <div class="container" style="align-items: center">
        <div>
            <a-select v-model:value="language" class="w-11/12 font-sans">
                <a-select-option v-for="item in languageOptions" :key="item.value" :label="item.label"
                    :value="item.value" style="
                                        font-family: 'Courier New', fantasy;
                                        font-size: 15px;
                                    " />
            </a-select>
        </div>
        <div>
            <a-button shape="circle" @click="emit('openSetting')" :icon="h(SettingOutlined)" />
        </div>
        <div>
            <a-button shape="circle" @click="emit('openSolution')" :icon="h(InfoCircleOutlined)" />
        </div>
    </div>
</template>

<style scoped>
.container {
    display: grid;
    grid-template-columns: 200px repeat(2, 10%);
}
</style>